@charset "UTF-8";
@import 'config';

.home-title {
  @include fs(36);
  display: inline-block;
  color: #666666;
  @include pad(32,0,32,32);
  position: relative;
  &:before {
    content: '';
    display: block;
    left: 0;
    @include t(30);
    position: absolute;
    @include w(10);
    @include h(34);
    @include bdr(6);
    background: #e30900;
  }
}
.banner {
  .swiper-slide {
    @include w(750);
    img {
      width: 100%;
    }
  }
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: none;
  }
  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: none;
  }
  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }

  .swiper-pagination-bullet {
    @include w(20);
    @include h(20);
    display: inline-block;
    border-radius: 50%;
    background: #cfcfcf;
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;
    background: #e30900;
  }
  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    @include b(30);
    left: 0;
    width: 100%;
  }
  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    @include ml(14);
    @include mr(14);
  }
  .swiper-slide img {
    display: block;
  }
}
.main {
  .shop-list{
    overflow: hidden;
    @include pl(20);
    @include pb(30);
    background: #ffffff;
    li {
      float: left;
      @include w(86);
      @include ml(28);
      @include mr(28);
      @include mt(24);
      img {
        @include w(86);
        @include h(86);
      }
      p {
        @include w(86);
        @include fs(20);
        color: #333333;
        @include mt(8);
      }
    }
  }
  .news {
    background: #ffffff;
    overflow: hidden;
    @include mt(20);
    @include pt(20);
    @include pl(39);
    @include pb(20);
    img {
      float: left;
      @include w(142);
      @include h(168);
    }
    .top-line {
      float: left;
      @include ml(8);
      @include mt(12);
      li {
        @include mt(12);
        &:first-child {
          @include mt(0);
        }
        span {
          display: inline-block;
          vertical-align: middle;
          @include w(65);
          @include lh(31);
          text-align: center;
          @include fs(20);
          color: #ff4949;
          @include bd(2,solid,#ff4949);
          @include bdr(6);
        }
        h2 {
          display: inline-block;
          vertical-align: middle;
          @include ml(18);
          @include w(438);
          @include lh(36);
          a {
            @include fs(24);
            color: #666666;
          }
        }
      }
    }
  }
  .introduce {
    overflow: hidden;
    background: #ffffff;
    @include mt(20);
    li {
      float: left;
      text-align: right;
      position: relative;
      @include w(235);
      @include h(128);
      border-right: 1px solid #999999;
      border-bottom: 1px solid #999999;
      &:nth-of-type(3n){
        @include pr(20);
        border-right: none;
      }
      &:nth-of-type(3n+1){
        @include pl(20);
      }
      &:nth-child(4){
        border-bottom: none;
      }
      &:nth-child(5){
        border-bottom: none;
      }
      &:nth-child(6){
        border-bottom: none;
      }
      img {
        @include w(89);
        @include w(83);
        position: absolute;
        @include l(30);
        top: 50%;
        @include translate(0,-50%);
      }
      h3 {
        @include fs(26);
        color: #333333;
        @include mt(18);
        @include pr(10);
      }
      p {
        @include fs(22);
        color: #999999;
        @include mt(8);
        @include pr(10);
      }
    }
  }
  .hot-goods {
    background: #ffffff;
    @include mt(20);
    overflow: hidden;
    @include w(710);
    @include pad(0,20,12,20);
    li {
      float: left;
      @include w(223);
      @include mr(20);
      text-align: center;
      &:nth-of-type(3n){
        @include mr(0);
      }
      img {
        @include w(223);
        @include h(236);
      }
      h4 {
        @include fs(28);
        color: #160d0d;
        @include mag(16,0,40,0);
      }
    }
  }
  .on-new {
    overflow: hidden;
    @include mag(20,0,20,0);
    li {
      float: left;
      @include w(242);
      @include h(130);
      @include ml(12);
      &:first-child {
        @include ml(0);
      }
      a {
        display: block;
        @include w(242);
        @include h(130);
        position: relative;
        div {
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(155,155,155,0.5);
          @include fs(28);
          color: #ffffff;
          text-align: center;
          @include w(242);
          @include lh(130);
        }
        img {
          @include w(242);
          @include h(130);
        }
      }
    }
  }
  .explosion {
    @include w(710);
    margin: 0 auto;
    @include pad(0,20,20,20);
    background: #ffffff;
    .title {
      overflow: hidden;
      span {
        @include fs(20);
        color: #666666;
        @include ml(4);
      }
      b {
        float: right;
        @include fs(24);
        color: #333333;
        position: relative;
        @include t(36);
        i {
          font-family: '宋体';
          @include ml(10);
        }
      }
    }
    .goods {
      li {
        overflow: hidden;
        @include mb(20);
        img {
          @include w(258);
          @include h(239);
          float: left;
          @include ml(14);
        }
        .details {
          float: left;
          @include ml(10);
          h4 {
            @include fs(28);
            color: #000000;
            @include ml(-12);
            @include mt(24);
            a {
              @include fs(28);
              color: #000000;
            }
          }
          p {
            @include w(420);
            @include fs(20);
            color: #000000;
            @include mt(20);
            @include lh(30);
          }
          span {
            display: block;
            @include fs(24);
            color: #000000;
            @include mt(12);
            i {
              @include fs(36);
              color: #ff3333;
            }
          }
          b {
            display: block;
            float: right;
            @include w(134);
            @include lh(54);
            background: #ff3333;
            @include fs(24);
            color: #ffffff;
            text-align: center;
            @include bdr(10);
          }
        }
      }
    }
  }
  .new-people {
    background: #ffffff;
    border-top: 1px solid #c9c9c9;
    overflow: hidden;
    li {
      width: 50%;
      @include h(160);
      float: left;
      box-sizing: border-box;
      border-right: 1px solid #c9c9c9;
      overflow: hidden;
      &:first-child{
        @include pl(54);
      }
      &:last-child{
        border-right:none;
        @include pl(32);
      }
      div {
        float: left;
        h5 {
          @include fs(30);
          color: #333333;
          @include mt(42);
          a {
            @include fs(30);
            color: #333333;
          }
        }
        p {
          @include fs(24);
          color: #999999;
          @include mt(20);
        }
      }
      >a img {
        @include w(110);
        @include w(119);
        float: left;
        @include mt(15);
        @include ml(40);
      }
    }
  }
  .selected {
    @include mt(20);
    background: #ffffff;
    h3 {
      @include fs(28);
      color: #333333;
      @include mb(16);
    }
    p {
      @include fs(24);
      color: #999999;
      @include mb(12);
    }
    .group {
      overflow: hidden;
      .tea {
        float: left;
        @include pt(32);
        @include w(300);
        @include h(386);
        box-sizing: border-box;
        text-align: center;
        border-right: 1px solid #999999;
        a {
          display: block;
          img {
            @include w(218);
            @include h(276);
            display: block;
            margin: 0 auto;
          }
        }
      }
      .tea-group {
        float: left;
        >div {
          @include w(450);
          @include h(193);
          box-sizing: border-box;
          a {
            display: block;
            height: 100%;
          }
          &:first-child {
            border-bottom: 1px solid #999999;
            position: relative;
            img {
              @include w(114);
              @include h(154);
              position: absolute;
              @include l(12);
              @include t(22);
            }
            div {
              @include w(300);
              text-align: center;
              @include ml(116);
              @include pt(56);
            }
          }
          &:last-child {
            position: relative;
            img {
              @include w(153);
              @include h(168);
              position: absolute;
              @include l(10);
            }
            div {
              @include w(300);
              text-align: center;
              @include ml(130);
              @include pt(56);
            }
          }
        }
      }
    }
    .goods {
      overflow: hidden;
      li {
        width: 50%;
        @include h(214);
        float: left;
        box-sizing: border-box;
        overflow: hidden;
        border-top: 1px solid #999999;
        border-right: 1px solid #999999;
        @include pt(10);
        &:nth-of-type(2n){
          border-right: none;
        }
        a {
          display: block;
          height: 100%;
          img {
            @include w(124);
            @include h(197);
            float: left;
          }
          div {
            float: left;
            @include pt(40);
            @include w(245);
            text-align: center;
          }
        }
      }
    }
  }
  .today {
    @include pad(0,20,0,20);
    background: #ffffff;
    ul {
      overflow: hidden;
      @include w(710);
      @include pb(20);
      li {
        float: left;
        @include w(222);
        @include h(222);
        @include ml(22);
        @include mb(24);
        &:nth-last-of-type(3n){
          @include ml(0);
        }
        img {
          @include w(222);
          @include h(222);
        }
      }
    }
  }
  .root {
    @include mag(20,0,20,0);
    img {
      width: 100%;
    }
  }
  .new-arrival {
    @include pad(0,20,0,20);
    background: #ffffff;
    ul {
      overflow: hidden;
      @include pb(8);
      li {
        float: left;
        @include w(336);
        @include mag(0,10,26,9);
        font-size: 0;
        >a img {
          @include w(336);
          @include h(274);
        }
        .text {
          @include h(104);
          background: #ececec;
          @include pl(10);
          @include pt(14);
          position: relative;
          h4 {
            @include mb(18);
            a {
              @include fs(24);
              color: #333333;
            }
          }
          span {
            display: block;
            @include fs(24);
            color: #333333;
            i {
              @include fs(28);
              color: #ff0000;
            }
          }
          .icon {
            position: absolute;
            @include b(11);
            @include r(13);
            img {
              @include w(32);
              @include mr(17);
            }
            img:first-child {
              @include w(34);
            }
          }
        }
      }
    }
  }
  .pic {
    @include mag(20,0,20,0);
    img {
      width: 100%;
    }
  }
  .guss {
    @include pad(0,20,0,20);
    background: #ffffff;
    >a {
      display: block;
      img {
        @include w(710);
        @include h(294);
        @include mt(-20);
      }
    }
    ul {
      @include w(710);
      @include mt(12);
      .on:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        @extend .bordersanjiao;
        position: absolute;
        @include t(-63);
        @include l(68);
      }
      li {
        position: relative;
        @include w(177);
        float: left;
        text-align: center;
        img {
          @include w(132);
          @include h(132);
        }
        h5 {
          @include fs(24);
          color: #333333;
        }
        p {
          @include fs(24);
          color: #666666;
          @include mt(8);
          span {
            @include fs(24);
            color: #cc0000;
          }
        }
      }
    }
    ol {
      @include w(710);
      @include pb(30);
      @include pt(25);
      clear: both;
      li {
        overflow: hidden;
        >a img {
          @include w(355);
          @include h(297);
          float: left;
        }
        div {
          @include w(355);
          @include h(297);
          box-sizing: border-box;
          float: left;
          background: #dadada;
          @include pad(56,6,10,30);
          overflow: hidden;
          h5 {
            @include w(310);
            @include lh(36);
            a {
              @include fs(24);
              color: #333333;
            }
          }
          p {
            @include fs(24);
            @include mt(40);
            color: #333333;
            span {
              @include fs(28);
              color: #cc0000;
            }
          }
          img {
            @include w(199);
            @include h(93);
            float: right;
          }
        }
      }
    }
  }
}


